<template>
	<view>
		<u-navbar 
		:title="null"
		:height="uNavbar.height" 
		:is-back="uNavbar.isBack" 
		:border-bottom="uNavbar.borderBottom">
			<view class="slot-wrap">
				<u-search shape="round" placeholder="搜索热门壁纸" bg-color="#F5F5F5" 
				:margin="uNavbar.margin" 
				:height="uNavbar.searchHeight"
				:show-action="uNavbar.showAction" 
				:disabled="uNavbar.disabled" 
				@click="handSearch">
				</u-search>
			</view>
			<!-- #ifdef APP-PLUS | H5 -->
			<view slot="right">
				<u-icon custom-prefix="icon" size="48" color="#101010" 
				:name="uNavbar.uIcon"
				:custom-style="uNavbar.customStyle" 
				@click="handIcon"></u-icon>
			</view>
			<!-- #endif -->
		</u-navbar>
		
		<!-- 正文内容 -->
		<view>
			<view class="content">
				<block v-for="item in list" :key="item.id">
					<view :class="uNavbar.uIcon == 'shouji1'?'listPhone':'listNetBook'">
						<view class="image-content">
							<image :src="item.img" @click="handDetails"></image>
						</view>
						<view class="depict-content">
							<view class="title">{{item.title}}</view>
							<view class="depict">
								<view class="Info u-line-1">{{item.Info}}</view>
								<view class="amount">
									<u-icon name="xiazai2" custom-prefix="icon" size="28" color="#D5D5D5"
										label-color="#D5D5D5" label-size="24" top="4" :label="item.count"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<u-tabbar :list="tabBarList" iconSize="48"></u-tabbar>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				list: [ // 渲染数据
					{
						id: 1,
						img: '../../static/image/e3.png',
						title: '我是标题',
						Info: '我是一段很长很长的描述内容啊，而且超出一行省略！！！',
						count: 1245
					},
					{
						id: 2,
						img: '../../static/image/e3.png',
						title: '我是标题',
						Info: '我是一段很长很长的描述内容啊，而且超出一行省略！！！',
						count: 1245
					},
					{
						id: 3,
						img: '../../static/image/e3.png',
						title: '我是标题',
						Info: '我是一段很长很长的描述内容啊，而且超出一行省略！！！',
						count: 1210
					},
				],
				uNavbar: { // 自定义顶部导航栏
					// #ifdef APP-PLUS | H5
					height: 80, // 状态栏高度
					margin: '-10rpx 0 0 40rpx', // 搜索框外边距
					searchHeight: 80, // 搜索框高度
					// #endif
					
					// #ifdef MP
					margin: '0 0 0 40rpx',
					searchHeight: 60, // 搜索框高度
					// #endif
					isBack: false, // 控制是否显示导航栏左边返回图标和辅助文字 
					borderBottom: false, // 导航栏底部是否显示下边框
					showAction: false, // 导航栏中搜索框是否显示右侧控件
					disabled: true, // 是否启用输入框
					customStyle: { // 图标的样式设置
						margin: '0 40rpx'
					},
					uIcon: 'shouji1', // 图标名称
				},
			}
		},
		methods: {
			// 切换图标 (调用不同接口的数据)
			handIcon() {
				let uIcon = this.uNavbar.uIcon === 'shouji1' ? 'diannaopcxianshiqi' : 'shouji1';
				this.uNavbar.uIcon = uIcon;
			},
			// 点击输入框
			handSearch() {
				uni.navigateTo({
				    url: '/pages/home/search/search',
				});
			},
			// 点击进入详情页
			handDetails(){
				uni.navigateTo({
				    url: '/pages/home/insidePages/PhoneInsidePages',
				});
			}
		},
		computed: {
			...mapGetters([ // 自定义底部导航栏
				'tabBarList',
			])
		},
	}
</script>

<style lang="scss" scoped>
	// 使导航栏的搜索占一行
	.slot-wrap {
		display: flex;
		align-items: center;
		// #ifdef APP-PLUS | H5
		flex: 1;
		// #endif
		// #ifdef MP
		align-items: center;
		// #endif
	}
	
	.content {
		width: 100%;
		padding: 0 40rpx 0;
		display: flex;
		flex-wrap: wrap;

		.listPhone {
			width: 50%;
			padding-bottom: 60rpx;
			animation: slide-top .5s cubic-bezier(.445, .05, .55, .95) both;

			&:nth-child(2n) {
				padding-left: 20rpx;
			}

			.image-content {
				border-radius: 16rpx;
				height: 420rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
		}

		.listNetBook {
			width: 50%;
			margin-bottom: 60rpx;
			animation: slide-top .5s cubic-bezier(.445, .05, .55, .95) both;

			&:nth-child(3n+2) {
				padding-left: 20rpx;
			}

			.image-content {
				border-radius: 16rpx;
				height: 220rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}

			&:nth-child(3n) {
				width: 100%;

				.image-content {
					border-radius: 16rpx;
					height: 380rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
			}
		
		}

		// 描述样式
		.depict-content {
			position: relative;

			.title {
				font-size: 32rpx;
				color: #101010;
				font-weight: bold;
				line-height: 44rpx;
				margin: 20rpx 0;
			}

			.depict {
				.Info {
					width: 200rpx;
					color: #E9E9E9;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
				}

				.amount {
					position: absolute;
					right: 0;
					bottom: 6rpx;
				}
			}
		}

	}

</style>